<% layout('boilerplate') -%>
<style>
    .theme-container img {
        width: 100%;
    }
    .theme-goods-list {
        padding: 10px 8px;
    }
    .goods_items {
        margin-bottom: 0.3rem;
    }
    .goods_left {
        width: 30%;
        display: inline-block;
    }
    .goods_right {
        width: 67%;
        position: relative;
        float: right;
        padding: 3px;
    }
    .goods_right .goods_title {
        font-size: .3rem;
        margin-bottom: .15rem;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        font-weight: 700;
    }

    .goods_items .goods_info {
        font-size: .24rem;
        color: #999;
    }

    .goods_items .goods_footer {
        line-height: .3rem;
        width: 95%;
        font-size: .24rem;
        position: absolute;
        height: .3rem;
        bottom: 5px;
    }
    .goods_items .doctor {
        padding-right: 10px;
    }
    .goods_items .goods_sell_cont {
        /*display: flex;*/
        /*align-items: center;*/
        color: #ccc;
        height: .3rem;
        font-size: 0.24rem;
        line-height: .3rem;
    }
    .goods_items .goods_sell_cont i{
        position: relative;
        top: 0.02rem;
        margin-right: 0.12rem;
        display: inline-block;
        width: 0.24rem;
        height: 0.24rem;
        background-color: #ff6593;
        border-radius: 50%;
    }
    .goods_items .goods_footer .price {
        color:#ff6593;
        font-size: .3rem
    }
</style>
<div class="theme-container">
    <div class="theme-header">
        <img src="<%= linkPath %>/images/theme/theme_header.png" alt="">
    </div>
    <div id="iCenter"></div>
    <div class="theme-goods-list">

    </div>
</div>
<script src="https://webapi.amap.com/maps?v=1.3&key=9ffe42e17300a715aebd32d0ba66b55a"></script>
<script>
    $(function () {
        function load(imgSrc, callback) {
            var imgs = [];
            var c = 0;
            for (var i = 0; i < imgSrc.length; i++) {
                imgs[i] = new Image();
                imgs[i].src = imgSrc[i];
                imgs[i].onload = function () {
                    c++
                    if (c == imgSrc.length) {
                        if (callback) {
                            callback();
                        }
                    }
                }
            }
            return imgs;
        }

        // var goods_ids = '183,180,199,200,201,204,205'
        var goods_ids = '183,180'

        var getGoods = function (goods_ids) {
            var dtd = $.Deferred();
            $.getJSON('<%= phpApiUrl %>/index.php/v1/api/goods?ids='+goods_ids,function (data) {
                if(data.code == 10000){
                    dtd.resolve(data.result);
                }else {
                    dtd.reject(data.message)
                }
            })
            return dtd.promise();
        }

        var imgBaseUrl = '<%= phpImgUrl %>'
        var getGood_item = function (item) {
            return  '<div class="goods_items" data-id="'+ item.goods_id +'">\n' +
                    '<div class="goods_left">\n' +
                    '    <img src="'+ imgBaseUrl + '/' + item.default_image +'" alt="">\n' +
                    '</div>\n' +
                    '<div class="goods_right">\n' +
                    '    <div class="goods_title">'+ item.goods_name +'</div>\n' +
                    '    <div class="goods_info">\n' +
                    '        <span class="doctor">'+ (item.doctor ? item.doctor.doctor_name : '') +'</span><span>'+ (item.store ? item.store.store_name : '') +'</span>\n' +
                    '    </div>\n' +
                    '    <div class="goods_footer">\n' +
                    '        <div class="goods_sell_cont pull-left">\n' +
                    '            <i class="point pull-left"></i><span class="goods_sell">'+ item.sell_total +'</span><span>个用户购买</span>\n' +
                    '        </div>\n' +
                    '        <div class="price pull-right">\n' +
                    '            ¥<span class="price_num">'+ item.price +'</span>\n' +
                    '        </div>\n' +
                    '    </div>\n' +
                    '</div>\n' +
                    '</div>'
        }

        getGoods(goods_ids).then(function (dataList) {
            var str = '';
            dataList.forEach(function (v) {
                str += getGood_item(v);
            })
            $('.theme-goods-list').html(str);
            $('.theme-goods-list .goods_items').each(function (i,v) {
                var $this = $(v);
                load([$this.find('.goods_left img').attr('src')], function () {
                    var item_h = $this.height();
                    $this.find('.goods_right').css('height',item_h + 'px');
                })
            })
        })

        var u = navigator.userAgent;
        //判断 客户端 os
        var isIos = function () {
            return !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
        }
        var isAndriod = function(){
            return u.indexOf('Android') > -1 || u.indexOf('Adr') > -1;
        }

        $(document).on("click",".goods_items",function () {
            var goodsId = $(this).data('id');
            if(isAndriod()){
                window.specialDetail.toGoods(goodsId);
            }
        })


        // function getLocation()
        // {
        //     if (navigator.geolocation)
        //     {
        //         navigator.geolocation.getCurrentPosition(function (pos) {
        //             alert("Latitude: " + pos.coords.latitude +
        //                 "Longitude: " + pos.coords.longitude);
        //         });
        //     }
        //     else{alert("Geolocation is not supported by this browser.")}
        // }
        //
        // getLocation();

        // var mapObj = new AMap.Map('iCenter');
        //      mapObj.plugin('AMap.Geolocation', function () {
        //              geolocation = new AMap.Geolocation({
        //                      enableHighAccuracy: true, // 是否使用高精度定位，默认:true
        //                      timeout: 10000,           // 超过10秒后停止定位，默认：无穷大
        //                      maximumAge: 0,            // 定位结果缓存0毫秒，默认：0
        //                      convert: true,            // 自动偏移坐标，偏移后的坐标为高德坐标，默认：true
        //                      showButton: true,         // 显示定位按钮，默认：true
        //                      buttonPosition: 'LB',     // 定位按钮停靠位置，默认：'LB'，左下角
        //                      buttonOffset: new AMap.Pixel(10, 20), // 定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
        //                      showMarker: true,         // 定位成功后在定位到的位置显示点标记，默认：true
        //                      showCircle: true,         // 定位成功后用圆圈表示定位精度范围，默认：true
        //                      panToLocation: true,      // 定位成功后将定位到的位置作为地图中心点，默认：true
        //                      zoomToAccuracy:true       // 定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
        //              });
        //              mapObj.addControl(geolocation);
        //              geolocation.getCurrentPosition();
        //              AMap.event.addListener(geolocation, 'complete', onComplete); // 返回定位信息
        //              AMap.event.addListener(geolocation, 'error', onError);       // 返回定位出错信息
        //          });
        //
        //      function onComplete(obj){
        //              var res = '经纬度：' + obj.position +
        //                          '\n精度范围：' + obj.accuracy +
        //                      '米\n定位结果的来源：' + obj.location_type +
        //                      '\n状态信息：' + obj.info +
        //                      '\n地址：' + obj.formattedAddress +
        //                      '\n地址信息：' + JSON.stringify(obj.addressComponent, null, 4);
        //              alert(res);
        //          }
        //
        //      function onError(obj) {
        //              alert(obj.info + '--' + obj.message);
        //              console.log(obj);
        //          }

    })
</script>
